<template>
 <div @click.stop="ddddd">
   <p>photoshop</p>
   <photoshop-picker v-model="photoshopcolors" :presetColors='presetColors'/>
   <p>sketch</p>
   <sketch-picker v-model="sketchcolors" :presetColors="[]" />
   <p>chrome</p>
   <chrome-picker v-model="chromecolors"/>
   <p>slider</p>
   <slider-picker v-model="slidercolors" />
   <p>swatches</p>
   <swatches-picker v-model="swatchescolors" />
   <p>compact</p>
   <compact-picker v-model="compactcolors" />
   <p>material</p>
   <material-picker v-model="materialcolors" />
   <p>vue-color-picker</p>
   <vue-color-picker ref="vueColorPicker" v-model="vueColors" @cancel="ddddd"></vue-color-picker>

 </div>
</template>

<script>
import { Photoshop,Sketch,Chrome,Slider,Swatches,Compact,Material } from 'vue-color'
import vueColorPicker from './colorPicker/vue-color-picker.vue'
export default {
 components: {
   'photoshop-picker': Photoshop,
   'sketch-picker': Sketch,
   'chrome-picker': Chrome,
   'slider-picker': Slider,
   'swatches-picker': Swatches,
   'compact-picker': Compact,
   'material-picker': Material,
   vueColorPicker
 },
 data() {
   return {
     photoshopcolors: { r: 255, g: 0, b: 0, a:0.5 },
     sketchcolors: '#194d33',
     chromecolors: '#194d33',
     slidercolors: '#194d33',
     swatchescolors: '#194d33',
     compactcolors: '#194d33',
     materialcolors: '#194d33',
     vueColors: '#194d33',
     presetColors: ["#c21401","#ff1e02","#ffc12a","#ffff3a","#90cf5b","#00af57","#00afee","#0071be","#00215f","#72349d"]

   };
 },
 methods: {
   ddddd(e) {
     console.log(e,2222);
     console.log(e.target,3333);
     var e = e || window.event; //浏览器兼容性
      var elem = e.target || e.srcElement;
      if ($(elem).parents('.m-colorPicker').length != 1) {
           let vueColorPicker = this.$refs.vueColorPicker
     if(vueColorPicker && vueColorPicker.openStatus) vueColorPicker.closePanel()
      }
    
   }
 },
 created() {

 },
 activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 }
</script>
<style lang="less" scoped>
  .vc-material {
    width: 130px;
    height: 130px;
  }
</style>